<template>
	<view>
		<u-popup :border-radius="40" class="xf-select" :height="'80%'" mode="bottom" v-model="showPopup" @close="close"
			:mask-close-able="false" :mask="true">
			<view class="selBody pT25">
				<scroll-view scroll-y="true" class="pL15 pR15 scrollBox">
					<view class="typeFloor" v-for="(item,i) in typeLis">
						<view class="typeTitle font16 u-3 bold mT15 mB15">{{item.text}}</view>
						<block v-if="item.son">
							<view class="flex flex-wrap">
								<view :class="v.checked?'checked':''" class="typeItem" @click="checkType(v,i,j)"
									v-for="(v,j) in item.son">
									{{v.text}}
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
				<view class="selBtnBox flex jst-between alg-center mL15 mR15">
					<view class="resetBtn w40" @click="resetBtn">重置</view>
					<view class="confirmBtn w50" @click="sureBtn">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			defaultValue: {
				type: String,
				default: ''
			},
			isMultie: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ""
			},
			checkLength: {
				type: Number,
				default: 1
			},
			showLength: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				showPopup: false,
				typeLis: [],
				selData: [],
				text: []
			}
		},
		watch: {
			defaultValue: {
				immediate: true,
				handler(val) {
					if(val){
						this.setDefault(val)
					}
					
				}
			},

		},
		created() {
			this.setDefault()
		},
		methods: {
			async setDefault(val) {
				let arr=val&&val.length>0?val.split(','):[];
				this.typeLis=this.typeLis.length>0?this.typeLis:await this.baseStore.getDictionaryDataAll('jjp_oddjob_JobType');
				let d=this.xf.deepClone(this.typeLis)
				for(let i=0;i<d.length;i++){
					if(d[i].son&&d[i].son.length>0){
						for(let j=0;j<d[i].son.length;j++){
							if(arr.indexOf(d[i].son[j].value) >=0){
								d[i].son[j].checked=true;
								if(this.selData.indexOf(d[i].son[j].value)==-1){
									this.selData.push(d[i].son[j].value)
									this.text.push(d[i].son[j].text)
								}
							}else{
								d[i].son[j].checked=false;
							}
						}
					}
				}
				this.typeLis=this.xf.deepClone(d)
			},
			openPoup() {
				this.showPopup = true;
			},
			close() {
				this.showPopup = false;
			},
			resetBtn() {
				this.selData = [];
				this.text = []
				this.typeLis.map(v => {
					v.son.map(z => {
						z.checked = false
					})
				})
			},
			sureBtn() {
				this.$emit('getSelV', this.selData.join(','), this.text.join(','))
				this.close()
			},
			checkType(v, i, j) {
				if (this.isMultie != true && this.checkLength <= 1) {
					this.typeLis.map(d => {
						d.son.map(z => {
							if (z.value == v.value) {
								z.checked = !z.checked;
								if (z.checked) {
									this.selData = [z.value]
									this.text = [z.text]
								} else {
									this.selData = []
									this.text = []
								}

							} else {
								z.checked = false;
							}
						})
					})
				} else {

					if (this.selData.length >= this.checkLength && !this.typeLis[i].son[j].checked == true) {
						this.xf.onlineUtils.toast(`最多只能选择${this.checkLength}项`)
					} else {
						this.typeLis[i].son[j].checked = !this.typeLis[i].son[j].checked;
						if (this.typeLis[i].son[j].checked) {

							this.selData.push(this.typeLis[i].son[j].value)
							this.text.push(this.typeLis[i].son[j].text)
						} else {
							this.selData = this.selData.filter(item => item !== this.typeLis[i].son[j].value)
							this.text = this.text.filter(item => item !== this.typeLis[i].son[j].text)
						}
					}

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selBody {
		background: #fff;
		position: relative;
		height: calc(100% - 50rpx);
	}

	.typeItem {
		width: calc(33% - 30rpx);
		padding: 16rpx 0;
		// height: 80rpx;
		// line-height: 80rpx;
		border: 2rpx solid transparent;
		text-align: center;
		background: #F8F8F8;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;

		&:nth-child(3n) {
			margin-right: 0;
		}

		&.checked {
			color: #3291F8;
			background: #EAF4FE;
			border-radius: 16rpx;
			border: 2px solid #3291F8;
		}
	}

	.scrollBox {
		height: calc(100% - 160rpx);
	}

	.selBtnBox {
		position: absolute;
		left: 0;
		bottom: 0;
		width: calc(100% - 60rpx);
	}
</style>